<template>
  <div id="try">
    <!-- box_rolling下执行正面翻转动画   -->
    <div class="rollbox" :class="{'box_rolling':isRolling}" @click="rolling">
      <!-- 前面div -->
      <div class="rollbox_front">
        <div class="contentbox">
          <img :src="cardsrc" :class="!ifuserhave?'primarypic_nothave':''" />
          <div class="tip">
            点击翻转查看视频介绍
          </div>

        </div>
      </div>
      <!-- 后面div -->
      <div class="rollbox_behind">
        <!-- <div class="contentbox">
          <video>
            <source src="www.wxrb.com/uploadfiles/202006/17/2020061709233491933927.mp4" type="video/mp4"></video> -->
        <!-- <iframe src="http://www.wxrb.com/doc/2021/09/03/113503.shtml?spm=1630919159719" scrolling="no" border="0"
          frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%"> </iframe> -->
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
          @pause="onPlayerPause($event)" :options="playerOptions"></video-player>
        <div style="margin-top:15px;color:white;font-size:12px;z-index:3">点击翻转查看卡片</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'try',
    props: {
      videosrc: {
        type: String,
        default: "http://www.wxrb.com/uploadfiles/202109/03/2021090311040879027606.mp4"
      },
      poster: {
        type: String,
        default: require("../assets/images/share.jpeg")
      },
      srcindex: {
        type: Number,
        default: 0,
      },
      ifuserhave: {
        type: Boolean,
        default: false
      },
      foodname: {
        type: String
      }
    },
    data() {
      return {
        isRolling: false,
        playerOptions: {
          //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'metadata', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '3:4', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "" //url地址
          }],
          poster: "", //你的封面地址
          // width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
          }
        },
      }
    },
    created() {
      var count = this.$store.state.picnum
      this.cardsrc = require('../assets/images/card' +
        this.srcindex + '.jpg')
      this.playerOptions.sources[0].src = this.videosrc;
      this.playerOptions.poster = require('../assets/images/' +
        this.poster + '.jpg')
    },
    watch: {
      videosrc: {
        handler(newval) {
          // console.log(newval);
          this.playerOptions.sources[0].src = newval;
          console.log(this.playerOptions.sources[0].src, '视频赋值');
        }
      }
    },
    methods: {
      pauseVideo() {
        this.$refs.videoPlayer.player.pause();
      },
      random(arr1, arr2) {
        var sum = 0,
          factor = 0,
          random = Math.random();

        for (var i = arr2.length - 1; i >= 0; i--) {
          sum += arr2[i]; // 统计概率总和
        };
        random *= sum; // 生成概率随机数
        for (var i = arr2.length - 1; i >= 0; i--) {
          factor += arr2[i];
          if (random <= factor)
            return arr1[i];
        };
        return null;
      },
      rolling() {
        this.$refs.videoPlayer.player.pause();
        this.isRolling = !this.isRolling
      }
    }
  }
</script>
<style lang='less'>
  #try {
    margin: 10px 0;

    .primarypic_nothave {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: 0.9;
    }

    .rollbox {
      position: relative;
      perspective: 1000px;

      &_front,
      &_behind {
        transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
        backface-visibility: hidden; //元素背面向屏幕时是否可见
        transition-duration: .5s;
        transition-timing-function: 'ease-in';
        background: RGB(48, 72, 91);

        .contentbox {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .tip {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 30px;
            background: #30485b;
            text-align: center;
            font-size: 12px;
            line-height: 30px;
            color: white;
          }

          >img {
            width: 100%;
            height: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .5);
          }
        }
      }

      &_behind {
        transform: rotateY(180deg);
        visibility: hidden; //元素不可见，但占据空间
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    }


    .box_rolling {
      .rollbox_front {
        transform: rotateY(180deg);
        visibility: hidden;
      }

      .rollbox_behind {
        transform: rotateY(360deg);
        visibility: visible;

      }
    }
  }

  .vjs-poster {
    background-size: cover;
  }
</style>